<template>
  <div>
    <button @click="comp = 'News'">新闻</button>
    <button @click="comp = 'Music'">音乐</button>
    <button @click="comp = 'Game'">游戏</button>
    <!-- 
      缓存组件:
        <keep-alive> 包裹动态组件时，默认会缓存所有不活动的组件实例，而不是销毁它们
          - include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
          - exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
          - max - 数字。最多可以缓存多少组件实例
     -->
    <!-- include的字符串写法,只限制一个 -->
    <!-- <keep-alive include="News">
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- include的字符串写法,限制多个 -->
    <!-- <keep-alive include="News,Music">
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- include的数组写法 -->
    <!-- <keep-alive :include="['News', 'Music']">
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- include的正则写法 -->
    <!-- <keep-alive :include="/^News$/g">
      <component :is="comp"></component>
    </keep-alive> -->

    <!-- exclude的数组写法 -->
    <keep-alive :exclude="['News']" :max="4">
      <component :is="comp"></component>
    </keep-alive>
  </div>
</template>

<script>
import News from "./components/News";
import Music from "./components/Music";
import Game from "./components/Game";
export default {
  name: "App",
  components: {
    News,
    Music,
    Game,
  },
  data() {
    return {
      comp: "",
    };
  },
};
</script>

<style></style>
